<template>
  <div class="w-75 m-auto mt-4" v-if="organization">
    <organization-profile :organization="organization"></organization-profile>
    <h1>Пользователи:</h1>
    <view-user
      :tokens="tokens"
      :user="user"
      :currentPage="currentPage"
      :urlBase="'/organization/' + organization.id + '/'"
      :customFilterParams="{ organization_id: organization.id }"
    ></view-user>
  </div>
</template>

<script>
import { useFetch } from "@vueuse/core";
import OrganizationProfile from "../components/OrganizationProfile.vue";
import ViewUser from "../components/ViewUser.vue";

export default {
  components: { OrganizationProfile, ViewUser },
  props: {
    id: Number,
    tokens: Object,
    currentPage: Number,
  },
  data() {
    return {
      organization: undefined,
    };
  },
  mounted() {
    this.getOrganization(this.id, this.tokens.access_token);
  },
  methods: {
    // TODO: Добавить логику с фильтрациями, что я реализовал на сервере. В данном случае поиск по теме и по статусу
    getOrganization(id, token) {
      const { isFetching, data, onFetchError, onFetchResponse } = useFetch(
        `${process.env.VUE_APP_BASE_URI}/organization/${id}`,
        {
          beforeFetch({ options }) {
            options.headers.Authorization = `Bearer ${token}`;

            return { options };
          },
        }
      )
        .get()
        .json();

      onFetchError((error) => {
        this.error = error.message;
      });

      onFetchResponse(() => {
        this.organization = data.value;
      });
      return { isFetching };
    },
  },
};
</script>

<style>
</style>